<template>
  
  <div class="box">
    <div id="eader">
      <i class="el-icon-menu"></i>
      <span class=tit>员工管理</span>
    </div>
     <!-- 头部导航栏 -->
   <div class="nove">
     <div class="nov"
     >
       <!-- <el-row>  -->
           <el-button type="primary"  @click="tab">查看员工</el-button>
           <el-button type="success"  @click="adduser('ruleForm')">添加员工</el-button>
           <el-button type="info"  @click=" searched">搜索员工</el-button>
   </div>
   <transition
   name="el-zoom-in-center"
   >
   <div class="search" v-show="search==1">
       <el-input
       placeholder="请输入内容"
       v-model.number="userid"
       @keyup.enter.native="select"
       clearable>
   </el-input>
   <el-button icon="el-icon-search" circle @click="select"></el-button>
   </div>
  </transition>
  </div>
  <!-- 分割线 -->
  <div class="line"></div>
  <!-- 主体部分 -->
   <div class="baner">
     <!-- main显示的全部员工 -->
     <transition
      name="el-zoom-in-top"
     >
     <div class="alluser" v-show="see==1">
       <div style="height: 350px;">
      <el-table
      border-bottom='2px solid #A7D2F9'
      :data="Data"
      style="width: 100%"
      :header-cell-style="{
      background:'#909399',
      color:'#fff',
      textAlign:'center',
    }"
    :cell-style="{
      textAlign:'center',
    }">
      <el-table-column
        prop="eid"
        label="工号"
        width="90"
        >
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="id_num"
        label="身份证"
        width="190">
      </el-table-column>
      <el-table-column
        prop="rfid"
        label="RFID卡号"
        width="194">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="联系电话"
        width="170">
      </el-table-column>
      <el-table-column
        prop="status"
        label="在职状态"
        width="100">
        <template slot-scope="scope">
					<div slot="reference">
						{{scope.row.status==1?'在职':'离职'}}
					</div>
				</template>
      </el-table-column>
      <el-table-column
        prop="op"
        label="操作等级"
        width="120">
        <template slot-scope="scope">
					<div slot="reference">
						{{scope.row.op==1?'收银员':'管理员'}}
					</div>
				</template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="260">
        <template slot-scope="scope">
          <el-button type="primary" @click="show1(scope.$index)" class="cell_button1">修改</el-button>
          <el-button type="primary" @click="show2(scope.$index)" class="cell_button2">查看</el-button>
          <el-button type="primary" class="cell_button3">锁定</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
    <div style="width:100%;text-align:center">
    <el-pagination
    class="page"
    :page-size="page_size"
    :current-page="current_page"
    layout="prev, pager, next"
    @current-change="current_change"
    :total="total">
  </el-pagination>
</div>
     </div>
    </transition>
     <!-- 修改员工信息对话框 -->
     <el-dialog title="员工详细信息" :visible.sync="dialogFormVisible0" custom-class="way">
      <div style="width:100%;text-align:center">
      <el-form :model="ruleForm1" :inline="true" >
        <el-form-item label="员工名称" prop="name" :label-width="formLabelWidth">
          <el-input v-model="ruleForm1.name" autocomplete="off"></el-input>
        </el-form-item><br>
        <el-form-item label="工号" prop="eid" :label-width="formLabelWidth">
          <el-input  v-model="ruleForm1.eid" autocomplete="off" disabled></el-input>
        </el-form-item><br>
        <el-form-item label="身份证" prop="id_num" :label-width="formLabelWidth" >
          <el-input v-model="ruleForm1.id_num" autocomplete="off" disabled></el-input>
        </el-form-item><br>
        <el-form-item label="联系电话" prop="phone" :label-width="formLabelWidth">
          <el-input v-model.number="ruleForm1.phone" autocomplete="off"></el-input>
        </el-form-item><br>
        <el-form-item label="RFID卡号" prop="rfid" :label-width="formLabelWidth" >
          <el-input v-model="ruleForm1.rfid" autocomplete="off" ></el-input>
        </el-form-item><br>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="ruleForm1.psw" autocomplete="off"></el-input>
        </el-form-item><br>
        <el-form-item label="性别" prop="gender"  :label-width="formLabelWidth">
          <el-radio-group v-model="ruleForm1.gender">
            <el-radio label='1'>男</el-radio>
            <el-radio label='0'>女</el-radio>
          </el-radio-group>
        </el-form-item><br>
        <el-form-item label="出生日期" required   :label-width="formLabelWidth"> 
          <el-form-item prop="birthdate" >
            <el-date-picker type="date"v-model="ruleForm1.birthdate" autocomplete="off" ></el-date-picker>
          </el-form-item>
      </el-form-item><br>
        <el-form-item label="入职日期" required   :label-width="formLabelWidth"> 
          <el-form-item prop="entrydate" >
            <el-date-picker type="date"v-model="ruleForm1.entrydate" autocomplete="off" ></el-date-picker>
          </el-form-item>
      </el-form-item><br>
      <el-form-item label="在职状态" prop="status" :label-width="formLabelWidth">
          <el-select v-model.number="ruleForm1.status" placeholder="请选择在职状态">
            <el-option v-for="(v,i) in status" :key="i"  :label="v.lab" :value='v.val'></el-option>
        </el-select>
      </el-form-item>
        <br>
        <el-form-item label="操作级别" prop="op"  :label-width="formLabelWidth">
          <el-select v-model="ruleForm1.op" placeholder="请选择操作等级">
            <el-option v-for="(v,i) in op" :key="i"  :label="v.lab" :value='v.val'></el-option>
          </el-select>
        </el-form-item><br>
        <el-button type="primary" @click="resetData">确 定</el-button>
      </el-form>
    </div>
    </el-dialog>

    <!-- 员工详细信息对话框 -->   
    <el-dialog title="员工详细信息" :visible.sync="dialogFormVisible1" custom-class="way"> 
      <div style="width:100%;text-align:center">
      <el-form :model="ruleForm1" :inline="true" >
        <el-form-item label="员工名称" :label-width="formLabelWidth">
          <el-input v-model="ruleForm1.name" autocomplete="off" disabled></el-input>
        </el-form-item><br>
        <el-form-item label="工号" :label-width="formLabelWidth">
          <el-input v-model="ruleForm1.eid" autocomplete="off" disabled></el-input>
        </el-form-item><br>
        <el-form-item label="身份证" :label-width="formLabelWidth">
          <el-input v-model="ruleForm1.id_num" autocomplete="off" disabled></el-input>
        </el-form-item><br>
        <el-form-item label="联系电话" :label-width="formLabelWidth">
          <el-input v-model="ruleForm1.phone" autocomplete="off" disabled></el-input>
        </el-form-item><br>
        <el-form-item label="RFID卡号" :label-width="formLabelWidth">
          <el-input v-model="ruleForm1.rfid" autocomplete="off" disabled></el-input>
        </el-form-item><br>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="ruleForm1.psw" autocomplete="off" disabled></el-input>
        </el-form-item><br>
        <el-form-item label="性别" prop="gender"  :label-width="formLabelWidth">
          <el-radio-group v-model.number="ruleForm1.gender" disabled>
            <el-radio v-for="(v,i) in gender" :key="i" :label='v.val'>{{v.lab}}</el-radio>
          </el-radio-group>
        </el-form-item><br>
        <el-form-item label="出生日期" required   :label-width="formLabelWidth"> 
          <el-form-item prop="birthdate" >
            <el-date-picker type="date"v-model="ruleForm1.birthdate" autocomplete="off" disabled></el-date-picker>
          </el-form-item>
      </el-form-item><br>
        <el-form-item label="入职日期" required   :label-width="formLabelWidth"> 
          <el-form-item prop="entrydate" >
            <el-date-picker type="date"v-model="ruleForm1.entrydate" autocomplete="off" disabled></el-date-picker>
          </el-form-item>
      </el-form-item><br>
      <el-form-item label="在职状态" prop="status" :label-width="formLabelWidth">
        <el-select v-model.number="ruleForm1.status"  disabled>
          <el-option v-for="(v,i) in status" :key="i"  :label="v.lab" :value='v.val'></el-option>
      </el-select>
    </el-form-item>
      <br>
      <el-form-item label="操作级别" prop="op"  :label-width="formLabelWidth">
        <el-select v-model="ruleForm1.op"  disabled>
          <el-option v-for="(v,i) in op" :key="i"  :label="v.lab" :value='v.val'></el-option>
        </el-select>
      </el-form-item>
        </el-form-item>
      </el-form>
    </div>
    </el-dialog>
    
     <!-- 添加员工 -->
     <transition
     name="el-zoom-in-bottom"
     >
     <div class="adduser" v-show="see==2">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :inline=true>
        <el-col :span="11">
        <el-form-item label="员工姓名" prop="name"  :label-width="formLabelWidth">
          <el-input v-model="ruleForm.name"placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="id_num"  :label-width="formLabelWidth">
          <el-input v-model="ruleForm.id_num" placeholder="请输入身份证号"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="psw"  :label-width="formLabelWidth">
          <el-input placeholder="请输入密码" v-model="ruleForm.psw" show-password></el-input>
        </el-form-item>
        
      <el-form-item label="工号" prop="eid" :label-width="formLabelWidth">
        <el-input v-model.number="ruleForm.eid"placeholder="请输入工号"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="phone" :label-width="formLabelWidth">
        <el-input v-model.number="ruleForm.phone" placeholder="请输入联系电话"></el-input>
      </el-form-item>
      <el-form-item label="RFID卡号" prop="rfid" :label-width="formLabelWidth">
        <el-input v-model="ruleForm.rfid"  placeholder="请输入RFID卡号"></el-input>
      </el-form-item>
        </el-col>
        <el-col :span="11">
          
        <el-form-item label="出生日期" required :label-width="formLabelWidth">
          <el-form-item prop="birthdate">
            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.birthdate" style="width: 100%;"></el-date-picker>
          </el-form-item>
      </el-form-item>
          <el-form-item label="入职日期" required   :label-width="formLabelWidth"> 
            <el-form-item prop="entrydate" >
              <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.entrydate" style="width: 100%;"></el-date-picker>
            </el-form-item>
        </el-form-item>
        <el-form-item label="操作级别" prop="op"  :label-width="formLabelWidth">
          <el-select v-model.number="ruleForm.op" placeholder="请选择操作等级">
            <el-option v-for="(v,i) in op" :key="i"  :label="v.lab" :value='v.val'></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="在职状态" prop="status" :label-width="formLabelWidth">
          <el-select v-model.number="ruleForm.status" placeholder="请选择在职状态">
            <el-option v-for="(v,i) in status" :key="i"  :label="v.lab" :value='v.val'></el-option>
          </el-select>
        </el-form-item>
      <el-form-item label="性别" prop="gender"  :label-width="formLabelWidth">
        <el-radio-group v-model.number="ruleForm.gender">
          <el-radio v-for="(v,i) in gender" :key="i" :label='v.val'>{{v.lab}}</el-radio>
        </el-radio-group>
      </el-form-item>
        </el-col>
        <el-form-item  >
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </transition>
     <!-- 单个员工查询 -->
     <transition
     name="el-zoom-in-top"
     >
     <div class="selec" v-show="see==4  ">
      <el-table
      border-bottom='2px solid #A7D2F9'
      :data="selectData"
      style="width: 100%"
      :header-cell-style="{
      background:'#909399',
      color:'#fff',
      textAlign:'center',
    }"
    :cell-style="{
      textAlign:'center',
    }">
      <el-table-column
        prop="eid"
        label="工号"
        width="90"
        >
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="id_num"
        label="身份证"
        width="190">
      </el-table-column>
      <el-table-column
        prop="rfid"
        label="RFID卡号"
        width="194">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="联系电话"
        width="170">
      </el-table-column>
      <el-table-column
        prop="status"
        label="在职状态"
        width="100">
        <template slot-scope="scope">
					<div slot="reference">
						{{scope.row.status==1?'在职':'离职'}}
					</div>
				</template>
      </el-table-column>
      <el-table-column
        prop="op"
        label="操作等级"
        width="120">
        <template slot-scope="scope">
					<div slot="reference">
						{{scope.row.op==1?'收银员':'管理员'}}
					</div>
				</template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="260">
        <template slot-scope="scope">
          <el-button type="primary" @click="updataDialog(scope.$index)" class="cell_button1">修改</el-button>
          <el-button type="primary" @click="selectDialog(scope.$index)" class="cell_button2">查看</el-button>
          <el-button type="primary" class="cell_button3">锁定</el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>
  </transition>
  </div>
</div>        
</template>

<script>
  import crypto from "crypto";
  export default{
    data:function(){
      return {
        userid:null,
        see:1,
        search:0,
        dialogFormVisible0: false,
        dialogFormVisible1: false,
        formLabelWidth:'150px',
        indexed:0,
        a:false,
        page_size:5,
        current_page:1,
        total:0,
        status:[{
          lab:"在职",
          val:1
        },
        {
          lab:"离职",
          val:0
        }],
        op:[{
          lab:"收银员",
          val:1
        },
        {
          lab:"管理员",
          val:99
        } ],
        gender:[{
          lab:"男",
          val:1
        },
        {
          lab:"女",
          val:0
        } ],
        selectData:[],
        Data: [{}] ,
        ruleForm1: {
          id:'0',
          rfid:'',
          eid: '',
          name: '',
          id_num: '',
          psw: '',
          birthdate: '',
          status: 0,
          entrydate: '',
          op:0,
          gender:'',
          phone:''
        },
        ruleForm: {
          rfid: '',
          eid: null,
          name: '',
          id_num: '',
          psw: '',
          birthdate: null,
          status: null,
          entrydate: null,
          op:null,
          gender:null,
          phone:null
        },
        rules: {
          rfid: [
            { required: true, message: '请输入RFID卡号', trigger: 'blur' },
            { min: 6, max: 12, message: '长度为18个字符', trigger: 'blur' }
          ],
          eid: [
            { required: true, message: '请输入工号', trigger: 'blur' },
            { type: 'number', message: '长度为6个字符', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请输入员工姓名', trigger: 'blur' },
            { min: 0,  message: '请输入姓名', trigger: 'blur' }
          ],
          id_num: [
            { required: true, message: '请输入身份证号', trigger: 'blur' },
            { min: 18, max: 18, message: '请输入正确的身份证号', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '请输入联系电话', trigger: 'blur' },
            {type: 'number', message: '长度为8到11个字符', trigger: 'blur' }
          ],
          psw: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 1, max: 12, message: '长度为6到12个字符', trigger: 'blur' }
          ],
          birthdate: [
            { required: true, message: '请输入出生日期', trigger: 'blur' }
          ],
          entrydate: [
            { required: true, message: '请输入入职日期', trigger: 'blur' }
          ],
          status: [
            { required: true, message: '请选择操作等级', trigger: 'change' }
          ],
          op: [
            { required: true, message: '请选择操作等级', trigger: 'change' }
          ],
          gender:[
          { required: true, message: '请选择性别', trigger: 'change' }
          ]
        }
      } 
    },

    // 挂载
    mounted() {
    this.$axios({
      url: "http://server.hloli.cn:23300/api/selEmployee",
      method: "post",
            params: {
            so:1,
            limit: this.page_size,
            page:this.current_page,
            },
    }).then((res) => {
      console.log(res);
      if(res.data.code==200){
      this.Data = res.data.data;
      this.total = res.data.count;
    }else{
        this.$message({
    message:res.data.msg,
  })
      }
    });
  },

    // 函数
    methods:{
      tab(){
        this.see=5;
        setTimeout(() => {
               this.see=1;
               this. search=0;
            }, 300);
      },
      searched(){
        this.search=1;
        this.see=0;
      },
      // 初始化页数
      current_change(current_page){
        this.current_page=current_page;
        this.$axios({
      url: "http://server.hloli.cn:23300/api/selEmployee",
      method: "post",
            params: {
            so:1,
            limit: this.page_size,
            page:this.current_page,
            },
    }).then((res) => {
      console.log(res);
      if(res.data.code==200){
      this.Data = res.data.data;
      // this.total = res.data.count;
    }else{
        this.$message({
         message:res.data.msg,
  })
      }
    });

      },
      //全部成员处 点击修改
      show1(str1){
        this.indexed = str1;
        console.log(this.Data[str1].status)
          this.ruleForm1.id=this.Data[str1].id;
          this.ruleForm1.rfid=this.Data[str1].rfid;
          this.ruleForm1.eid=this.Data[str1].eid;
          this.ruleForm1.name=this.Data[str1].name;
          this.ruleForm1.id_num=this.Data[str1].id_num;
          this.ruleForm1.phone=this.Data[str1].phone;
          this.ruleForm1.psw=this.Data[str1].psw;
          this.ruleForm1.birthdate=this.Data[str1].birthdate;
          this.ruleForm1.entrydate=this.Data[str1].entrydate;
          this.ruleForm1.status=this.Data[str1].status;
          this.ruleForm1.op=this.Data[str1].op;
          this.ruleForm1.gender=String(this.Data[str1].gender);
          console.log(this.ruleForm1.status);0
          this.dialogFormVisible0 = true;
      },
      // 提交后修改员工数据
      resetData(){
        this.$confirm('您确定要修改该员工的相关信息', '确认信息', {
          distinguishCancelAndClose: true,
          confirmButtonText: '确定修改',
          cancelButtonText: '放弃修改'
        }) .then(() => {
          this.$axios({
          url: "http://server.hloli.cn:23300/api/editEmployee",
          method: "post",
          params: this.ruleForm1,
        }).then((res) => {
          console.log(res);
          if(res.data.code==200){
          this.$message({
              type: 'info',
              message: '该员工信息修改成功！'
            });

        // 关闭对话框
        this.dialogFormVisible0 = false;
        location.reload();
      }else{
        this.$message({
        message:res.data.msg,
  })
      }
        });
          })
            .catch(action => {
            this.$message({
              type: 'info',
              message: action === 'cancel'
                ? '您放弃修改该员工的相关信息'
                : '停留在当前页面'
            })
          });
      },
      // 全部成员处点击产看员工详细信息
      show2(str2){
        this.ruleForm1=this.Data[str2];
        //打开对话框
        this.dialogFormVisible1 = true;
      },
      //点击添加员工后出现表单
      adduser(formName){
        this.$refs[formName].resetFields();
            //显示出添加员工的表单
            this.see=5;
        setTimeout(() => {
               this.see=2;
               this. search=0;
            }, 300);
      },
      // 提交添加员工信息
      submitForm(formName) {   
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$confirm('您确定要添加该员工', '确认信息', {
          distinguishCancelAndClose: true,
          confirmButtonText: '确定添加',
          cancelButtonText: '放弃添加'
        })
          .then(() => {
            this.ruleForm.birthdate=this.ruleForm.birthdate.getTime();
            this.ruleForm.entrydate=this.ruleForm.entrydate.getTime();
            var  md5 = crypto.createHash("md5");
            md5.update(this.ruleForm.psw) ;
            this.ruleForm.psw = md5.digest('hex'); 
            console.log(this.ruleForm);
            this.$axios({
                url: "http://server.hloli.cn:23300/api/addEmployee",
                method: "post",
                params: this.ruleForm,
              }).then((res) => {
                console.log(res);
                if(res.data.code==200){
                setTimeout(() => {
                  this.$refs[formName].resetFields();
               }, 500);
            this.$message({
              type: 'success',
              message: '该员工添加成功！'
            });
              }
              });
          })
          .catch(action => {
            this.$message({
              type: 'info',
              message:  '放弃添加并离开页面'
            })
          });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
       // 重置添加员工表单
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      // 搜索某个员工
      select(){
        if(this.userid!=null){
        this.$axios({
          url:"http://server.hloli.cn:23300/api/selEmployee",
          method:"post",
          params:{
            so:this.userid,
            limit: 5,
            page:1,
          }
        }).then((res) => {
      console.log(res);
      if(res.data.code==200){
        this.selectData = res.data.data;
        this.userid=null;
        this.see=5;
        setTimeout(() => {
               this.see=4;
            },300);
      }else if(res.data.code==-200){
        this.$message({
    message:'抱歉没有您要找的人',
  })
      }else{
        this.$message({
    message:res.data.msg,
  })
      }
    });
        console.log(this.ruleForm1);
  }else{
    this.$message({
    message:"请您输入工号！",
  })
  }
      },
      // 搜索到员工后点击修改
      updataDialog(str1){
        this.indexed = str1;
          this.ruleForm1.id=this.selectData[str1].id;
          this.ruleForm1.rfid=this.selectData[str1].rfid;
          this.ruleForm1.eid=this.selectData[str1].eid;
          this.ruleForm1.name=this.selectData[str1].name;
          this.ruleForm1.id_num=this.selectData[str1].id_num;
          this.ruleForm1.phone=this.selectData[str1].phone;
          this.ruleForm1.psw=this.selectData[str1].psw;
          this.ruleForm1.birthdate=this.selectData[str1].birthdate;
          this.ruleForm1.entrydate=this.selectData[str1].entrydate;
          this.ruleForm1.status=this.selectData[str1].status;
          this.ruleForm1.op=this.selectData[str1].op;
          this.ruleForm1.gender=String(this.selectData[str1].gender);
          console.log(this.ruleForm1);
          //打开对话框
          this.dialogFormVisible0 = true;
      },
       // 搜索到员工后点击查看
      selectDialog(str2){
      this.ruleForm1=this.selectData[str2];
      //打开对话框
      this.dialogFormVisible1 = true;
    },
  },
 }
</script>
  <style scoped>
    /* 顶上标签 */
    #eader {
    width: 100%;
    height: 30px;
    color: rgb(51, 51, 51);
    border-bottom: 1px #999 solid;
    margin: 20px;
  }
    .el-icon-menu {
    font-size: 25px;
    margin-bottom: 10px;
  }
    .tit {
    font-size: 15px;
    margin: 10px;
  }
  /* 头部导航栏 */
      .heade{
        line-height: 60px
      }
      .nove{
          height: 100px;
          line-height: 100px;
          margin: 20px;
      }
      .nov{
        display: inline-block;
        margin-left: -30px;
      }
      .nove button{
          margin: 0 30px;
      }
      .nove button:hover{
        background-color: #F4F9FF;
      color:#0099FF;
      border-color:#0099FF ;
      }
      .line{
        border: 0.5px solid blue;
        margin-bottom: 40px;
        margin-left: 20px;
      }
      /* 主体显示部分 */
      .baner{
        margin: 20px;
      }
        /* 所有员工表 */
      .alluser{
        height: 300px;
      }
      .search{
          margin-right: 200px;
          float: right;
      }
      .search .el-input{
          width: 300px;
      }
    .el-form-item__content .el-input{
      width: 100%;
    }
    /* 操作按钮 */
    .cell button{
      width: 55px;
      height: 30px;
      padding: 5px;
      margin: 0 5px;
      border-color: #0099ff00;
    }
    .cell .cell_button1{
      background-color: #FEF1F1;
      color: #F56C6C;
    }
    .cell .cell_button2{
      background-color: #F0F9EC;
      color: #67C23A;
    }
    .cell .cell_button3{
      background-color: #FDF6EC;
      color: #EAA23C;
    }
    .cell button:hover{
      background-color: #F4F9FF;
      color:#0099FF;
      border-color:#0099FF ;
    }

    .el-dialog__header{
      border-bottom: 2px solid #000;
    }
    /* 表翻页 */
    .page{
      margin-top: 5px;
    }
    /* 添加员工按钮 */
    .adduser{
      margin-left: 200px;
    }
    .special{
      position: absolute;
      right:668px
    }
    .adduser {
    margin-left: 00px;
}

.dialog-fade-enter-active .el-dialog.way {
  animation: anim-open 0.3s;
}
.dialog-fade-leave-active .el-dialog.way {
  animation: anim-close 0.3s;
}
@keyframes anim-open {
  0% {
    transform: translate3d(0, 100%, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes anim-close {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 0;
  }
}
  </style>